<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件代理</title>
<body>
    <button>添加</button>
    <p>我是p0</p>
    <p>我是p1</p>
    <script>
        var count = 1;
        var btn = document.querySelector("button");
        // 获取按钮
        // 单击按钮在页面中添加一个p标签
        btn.addEventListener("click",e=>{
            var p = document.createElement("p");
            p.innerHTML=count+"标签p<br/>";
            document.body.append(p);
            // 这页面中插入p标签;
            count++;
        })

        // 给p标签添加一个事件，输出自己的html内容
        // var ps = document.querySelectorAll("p");
        // for(let i=0;i<ps.length;i++){
        //     ps[i].addEventListener("click",e=>console.log(ps[i].innerHTML))
        // }

        //  动态添加的p事件挂载不上去。。怎么解决-----事件代理
        //  把事件添加到元素共同的父上，让后通过e.target 事件目标 判断是否输出
        document.body.addEventListener("click",e=>{
            if(e.target.nodeName==="P"){
                console.log(e.target.innerHTML);
                // 如果事件的目标是p标签那么我们就输出它的内容
            }
        })
    </script>
</body>
</html>